<template>
    <div class="article-list" ref="content">
      <h2 class="article-list-title">最新文章</h2>
      
      <template v-if="!initialLoading">
        <div 
          v-for="article in articles" 
          :key="article.id" 
          class="article-item"
        >
          <h3 class="article-title">
            <router-link :to="`/blog/${article.id}`">{{ article.title }}</router-link>
          </h3>
          <p class="article-meta">
            摘要: {{ formatDate(article.createdAt) }}
            <br>
            发布时间：{{ formatDate(article.createdAt) }}
          </p>
          <div class="article-excerpt" v-html="article.summary"></div>
        </div>
  
        <LoadingStatus 
          :loading="loading"
          :no-more="noMore"
          :error="error"
          @retry="$emit('load-more')"
        />
      </template>
  
      <div v-else class="initial-loading">
        <div class="loader"></div>
        <span>正在加载文章...</span>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits, onMounted, onUnmounted } from 'vue';
  import LoadingStatus from '@/components/Article/LoadingStatus.vue';
  
  const props = defineProps({
    articles: {
      type: Array,
      default: () => []
    },
    loading: Boolean,
    initialLoading: Boolean,
    noMore: Boolean,
    error: String
  });
  
  const emit = defineEmits(['load-more']);
  
  // 滚动处理
  const handleScroll = () => {
    const scrollY = window.scrollY;
    const visibleHeight = window.innerHeight;
    const pageHeight = document.documentElement.scrollHeight;
    const threshold = 100;
  
    if (
      !props.loading &&
      !props.noMore &&
      scrollY + visibleHeight >= pageHeight - threshold
    ) {
      emit('load-more');
    }
  };
  
  // 日期格式化
  const formatDate = (timestamp) => {
    return new Date(timestamp).toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    });
  };
  
  onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
  });
  </script>
  
  <style scoped>
  .article-list {
    padding: 40px 20px;
    background-color: #f9f9f9;
  }
  
  .article-list-title {
    font-size: 32px;
    margin-bottom: 30px;
    text-align: center;
    color: #333;
  }
  
  .article-item {
    margin-bottom: 30px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
  }
  
  .article-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  }
  
  .article-title a {
    color: #2c3e50;
    text-decoration: none;
    font-size: 22px;
    font-weight: 600;
  }
  
  .article-title a:hover {
    color: #3498db;
  }
  
  .article-meta {
    color: #7f8c8d;
    font-size: 0.9em;
    margin: 10px 0;
  }
  
  .article-excerpt {
    color: #666;
    line-height: 1.6;
    font-size: 0.95em;
  }
  
  .initial-loading {
    text-align: center;
    padding: 30px 0;
    color: #666;
  }
  
  .loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #3498db;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  @media (max-width: 768px) {
    .article-list {
      padding: 30px 15px;
    }
  
    .article-item {
      padding: 15px;
    }
  
    .article-title a {
      font-size: 18px;
    }
  }
  
  @media (max-width: 480px) {
    .article-list-title {
      font-size: 24px;
    }
  
    .article-meta {
      font-size: 0.8em;
    }
  
    .article-excerpt {
      font-size: 0.9em;
    }
  }
  </style>